<!-- 老化产线监控 -->
<template>
  <div class="monitorage">
    <ul class="monitorage_top">
      <li class="monitorage_top_left">
        <div class="monitorage_top_left_top_div">
          <Title>当天老化合格率统计</Title>
          <div class="content content_bg">
            <div class="bg"></div>
            <div id="agingQualification"></div>
          </div>
        </div>
        <div class="monitorage_top_left_bottom_div">
          <Title>当天自动检测合格率</Title>
          <div class="content content_bg">
            <div class="bg"></div>
            <div id="automaticDetection"></div>
          </div>
        </div>
      </li>
      <li class="monitorage_top_center">
        <Title>老化车实时状态</Title>

        <div class="monitorage_show" v-if="!AlarmArr[0]">
          <swiper
            :spaceBetween="10"
            :autoplay="true"
            :modules="modules"
            class="mySwiper3"
          >
            <swiper-slide v-for="i in Math.ceil(NormalArr.length / 8)" :key="i">
              <ul>
                <li v-for="j in 8" :key="j">
                  <viewContent
                    :item="NormalArr[i * 8 + j - 9]"
                    v-if="NormalArr[i * 8 + j - 9]"
                  />
                </li>
              </ul>
            </swiper-slide>
          </swiper>
        </div>
        <!-- 存在告警信息的时候展示两个轮播图 -->
        <div class="monitorage_error" v-else>
          <div class="swiper_top">
            <swiper
              :loop="true"
              :spaceBetween="10"
              :autoplay="true"
              :modules="modules"
              class="mySwiper1"
            >
              <swiper-slide
                v-for="i in Math.ceil(AlarmArr.length / 3)"
                :key="i"
              >
                <ul>
                  <li v-for="j in 3" :key="j">
                    <viewErrorContent
                      :item="AlarmArr[i * 3 + j - 4]"
                      v-if="AlarmArr[i * 3 + j - 4]"
                    />
                  </li>
                </ul>
              </swiper-slide>
            </swiper>
          </div>
          <div class="swiper_bottom">
            <swiper
              :loop="true"
              :spaceBetween="10"
              :autoplay="true"
              :modules="modules"
              class="mySwiper2"
            >
              <swiper-slide
                v-for="i in Math.ceil(NormalArr.length / 4)"
                :key="i"
              >
                <ul>
                  <li v-for="j in 4" :key="j">
                    <viewContent
                      :item="NormalArr[i * 4 + j - 5]"
                      v-if="NormalArr[i * 4 + j - 5]"
                    />
                  </li>
                </ul>
              </swiper-slide>
            </swiper>
          </div>
        </div>
      </li>
      <li class="monitorage_top_right">
        <div class="monitorage_top_right_top_div">
          <Title>老化和自动检测的产品数量统计</Title>
          <div class="content" id="productQuantity"></div>
        </div>
        <div class="monitorage_top_right_bottom_div">
          <Title>近7天自动检测告警数量统计</Title>
          <div class="content" id="numAlarms"></div>
        </div>
      </li>
    </ul>
    <ul class="monitorage_bottom">
      <li class="monitorage_bottom_left" @click="showDetails">
        <Title>仪表和采集卡实时数据记录</Title>
        <dv-scroll-board ref="realtimeConfigRef" :config="realtimeConfig" />
      </li>
      <li class="monitorage_bottom_right" @click="showDetails">
        <Title>老化车实时告警记录</Title>
        <dv-scroll-board ref="realtimeAlarmConfigRef" :config="realtimeAlarmConfig" />
      </li>
    </ul>
    <a-modal
      v-model:open="open"
      title="查看详情"
      :footer="null"
      :bodyStyle="{ background: '#122942', color: '#00E5FF' }"
      getContainer="body"
    >
      <p v-for="(item, index) in detailsData" :key="item.id" class="details">
        <span v-if="detailsData[index]">{{ index }}</span>
        <span v-if="detailsData[index]">{{ item }}</span>
      </p>
    </a-modal>
  </div>
</template>

<script setup name="monitorage">
import dayjs from "dayjs";
import Title from "@/components/Title/index.vue";
import "swiper/css";
import * as echarts from "echarts";
import viewErrorContent from "./components/viewErrorContent.vue";
import viewContent from "./components/viewContent.vue";
import { Swiper, SwiperSlide } from "swiper/vue";
import { Autoplay } from "swiper/modules";
import { onBeforeUnmount, onMounted, ref } from "vue";
import monitorageApi from "@/api/monitorageApi.js";
import { transitionTime } from "@/utils/time.js";
import { P } from "@antv/g2plot";
const props = defineProps(["fullscreen"]);
const modules = [Autoplay];
// 详情弹窗
let open = ref(false);
let dataname = ref();
let detailsData = ref({});
const showDetails = (e) => {
  if (e.target.className !== "detail") {
    return;
  }

  let index = e.target.getAttribute("index");
  dataname.value = e.target.getAttribute("dataname");
  let _detailsData;
  if (dataname.value === "realtimeConfigData") {
    _detailsData = realtimeConfigData.value[index];
  }
  if (dataname.value === "realtimeAlarmConfigData") {
    _detailsData = realtimeAlarmConfigData.value[index];
  }
  for (let key in _detailsData) {
    if (key === "Name") {
      _detailsData["仪表和采集卡通道名称"] = _detailsData["Name"];
      delete _detailsData["Name"];
    }
    if (key === "UpdateTime") {
      _detailsData["更新时间"] = transitionTime(_detailsData["UpdateTime"]);
      delete _detailsData["UpdateTime"];
    }
    if (key === "Name") {
      _detailsData["仪表数据"] = _detailsData["InstrValue"];
      delete _detailsData["InstrValue"];
    }
    if (key === "Name") {
      _detailsData["采集卡通道数据"] = _detailsData["CCValue"];
      delete _detailsData["CCValue"];
    }
    if (key === "GWName") {
      _detailsData["老化车名称"] = _detailsData["GWName"];
      delete _detailsData["GWName"];
    }
    if (key === "InstrName") {
      _detailsData["仪表名称"] = _detailsData["InstrName"];
      delete _detailsData["InstrName"];
    }
    if (key === "AlarmDesp") {
      _detailsData["告警描述"] = _detailsData["AlarmDesp"];
      delete _detailsData["AlarmDesp"];
    }
    if (key === "ID") {
      delete _detailsData["ID"];
    }
  }
  detailsData.value = _detailsData;
  open.value = true;
};

/* ---------------- */
// 当天老化合格率统计
let agingQualificationChart = ref();
const setAgingQualificationChart = (data) => {
  if (!agingQualificationChart.value) {
    agingQualificationChart.value = markRaw(
      echarts.init(document.getElementById("agingQualification"))
    );
  }

  window.addEventListener("resize", function () {
    agingQualificationChart.value.resize();
  });
  let seriesData = [
    {
      value: data.PassCnt,
      name: "合格率",
      label: {
        color: "#0069fc",
      },
    },
    {
      value: data.NoPassCnt,
      name: "不合格率",
      label: {
        color: "#CF2226",
      },
    },
  ];
  let option = {
    grid: {
      top: 0,
      left: 0,
      right: 0,
      bottom: 0,
    },
    tooltip: {
      axisPointer: true,
      confine: true,
      trigger: "axis",
      textStyle: {
        color: "#fff",
      },
      extraCssText: "background:#112B43",
      axisPointer: {
        type: "cross",
        label: {
          backgroundColor: "#112B43",
        },
      },
    },
    series: [
      {
        color: ["#00FFED", "#D8BB37"],
        tooltip: {
          trigger: "item",
          show: true,
        },
        type: "pie",
        selectedMode: false,
        radius: [0, "65%"],
        label: {
          //formatter: "{name|{b}}\n{value|{c}%}",
          formatter: "{name|{b}}\n {value|{d}%}",
          position: "inside",
          fontSize: 14,
          fontWeight: 800,
          rich: {
            name: {
              fontWeight: "bold",
              overflow: "none",
            },
            value: {
              fontWeight: "bold",
              overflow: "none",
              fontStyle: "italic",
            },
          },
        },
        labelLine: {
          show: false,
        },
        data: seriesData,
      },
      {
        color: "#00FFED",

        tooltip: {
          show: false,
        },
        type: "pie",
        radius: ["75%", "79%"],
        label: {
          show: false,
        },
        select: {
          disabled: true,
        },
        emphasis: {
          disabled: true,
        },
        labelLine: {
          show: false,
        },
        cursor: "auto",
        data: [{ value: 100 }],
      },
    ],
  };
  agingQualificationChart.value.setOption(option, true);
};
// 当天自动检测合格率
let automaticDetectionChart = ref()
const setAutomaticDetectionChartChart = (data) => {
  if(!automaticDetectionChart.value){
    automaticDetectionChart.value = markRaw(
    echarts.init(document.getElementById("automaticDetection"))
  );
  }
 
  window.addEventListener("resize", function () {
    automaticDetectionChart.value.resize();
  });
  let seriesData = [
    {
      value: data.PassCnt,
      name: "合格率",
      label: {
        color: "#0069fc",
      },
    },
    {
      value: data.NoPassCnt,
      name: "不合格率",
      label: {
        color: "#CF2226",
      },
    },
  ];
  let option = {
    grid: {
      shadowColor: "rgba(255,255,255,1)",
      shadowBlur: 10,
    },
    tooltip: {
      axisPointer: true,
      confine: true,
      trigger: "axis",
      textStyle: {
        color: "#fff",
      },
      extraCssText: "background:#112B43",
      axisPointer: {
        type: "cross",
        label: {
          backgroundColor: "#112B43",
        },
      },
    },
    series: [
      {
        color: ["#00FFED", "#D8BB37"],
        tooltip: {
          trigger: "item",
          show: true,
        },
        type: "pie",
        selectedMode: false,
        radius: [0, "65%"],
        label: {
          //formatter: "{name|{b}}\n{value|{c}%}",
          formatter: "{name|{b}}\n {value|{d}%}",
          position: "inside",
          fontSize: 14,
          fontWeight: 800,
          rich: {
            name: {
              fontWeight: "bold",
              overflow: "none",
            },
            value: {
              fontWeight: "bold",
              overflow: "none",
              fontStyle: "italic",
            },
          },
        },
        labelLine: {
          show: false,
        },
        data: seriesData,
      },
      {
        color: "#00FFED",

        tooltip: {
          show: false,
        },
        type: "pie",
        radius: ["75%", "79%"],
        label: {
          show: false,
        },
        select: {
          disabled: true,
        },
        emphasis: {
          disabled: true,
        },
        labelLine: {
          show: false,
        },
        cursor: "auto",
        data: [{ value: 100 }],
      },
    ],
  };
  automaticDetectionChart.value.setOption(option, true);
};
//老化和自动检测的产品数量统计图表
let productQuantityChart = ref()
const setProductQuantityChart = (data) => {
  if(!productQuantityChart.value){
    productQuantityChart.value = markRaw(
    echarts.init(document.getElementById("productQuantity"))
  );
  }
  

  window.addEventListener("resize", function () {
    productQuantityChart.value.resize();
  });
  let day = data.map((el) => el.Day.split(" ")[0]);
  let xAxisData = day.map((el) => el.split("-")[1]+'/'+el.split("-")[2]);
  let seriesData = data.map((el) => el.AgeCnt);
  let seriesData2 = data.map((el) => el.AutoCheckCnt);
  let option = {
    color: ["#EEC639", "#019FC6"],
    tooltip: {
      axisPointer: true,
      confine: true,
      trigger: "axis",
      textStyle: {
        color: "#fff",
      },
      extraCssText: "background:#112A41",
      axisPointer: {
        type: "cross",
        label: {
          show:false,
          backgroundColor: "#112B43",
        },
      },
    },
    legend: {
      align: "left",
      type: "plain",
      top: 8,
      right: 10,
      data: ["老化数量", "检测数量"],
      textStyle: {
        color: "#ffffff",
      },
      padding:0,
      itemStyle: {
        color:'inherit',
        width: 0,
        opacity:0,
        hight:0,

       
      },
      lineStyle: {
        width: 10,
        hight:5,
        inactiveWidth: 0,
      },
    },
    grid: {
      left: 10,
      right: 20,
      bottom: 6,
      top: 34,
      containLabel: true,
    },
    xAxis: [
      {
        type: "category",
        boundaryGap: false,
        data: xAxisData,
        axisTick:{
        alignWithLabel:true
      },
        axisLine: {
          lineStyle: {
            color: "#fff",
          },
        },
      },
    ],
    yAxis: [
      {
        type: "value",
        axisLine: {
          lineStyle: {
            color: "#fff",
          },
        },
      },
    ],
    series: [
      {
        showSymbol: false,
        name: "老化数量",
        type: "line",
        stack: "Total",
        smooth: true,
        emphasis: {
          focus: "series",
        },
        data: seriesData,
        areaStyle: {
          color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
            {
              offset: 0,
              color: "#ffd43d",
            },
            {
              offset: 1,
              color: "#0C1724",
            },
          ]),
        },
      },
      {
        showSymbol: false,
        name: "检测数量",
        type: "line",
        stack: "Total",

        smooth: true,
        emphasis: {
          focus: "series",
        },
        data: seriesData2,
        areaStyle: {
          color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
            {
              offset: 0,
              color: "#01cdff",
            },
            {
              offset: 1,
              color: "#0C1724",
            },
          ]),
        },
      },
    ],
  };
  productQuantityChart.value.setOption(option, true);
};
// 近7天自动检测告警数量统计图表
let numAlarmsChart = ref()
const setNumAlarmsChart = (data) => {
  if(!numAlarmsChart.value){
    numAlarmsChart.value = markRaw(
    echarts.init(document.getElementById("numAlarms"))
  );
  }

  window.addEventListener("resize", function () {
    numAlarmsChart.value.resize();
  });
  let day = data.map((el) => el.Day.split(" ")[0]);
  let xAxisData = day.map((el) => el.split("-")[1]+'/'+el.split("-")[2]);
  let seriesData = data.map((el) => el.Cnt);
  let option = {
    color: "#00E5FF",
    xAxis: {
      boundaryGap: false,
      type: "category",
      data: xAxisData,
      axisTick:{
        alignWithLabel:true
      },
      axisLine: {
        lineStyle: {
          color: "#fff",
        },
      },
    },
    yAxis: {
      type: "value",
      axisLine: {
        lineStyle: {
          color: "#fff",
        },
      },
    },
    series: [
      {
        
        data: seriesData,
        type: "line",
      },
    ],
    grid: {
      top: 20,
      bottom: 6,
      left: 10,
      right: 20,
      containLabel: true,
    },
    tooltip: {
      axisPointer: true,
      confine: true,
      trigger: "axis",
      textStyle: {
        color: "#fff",
      },
      extraCssText: "background:transparent",
      axisPointer: {
        type: "cross",
        label: {
          show:false,
          backgroundColor: "#112B43",
        },
      },
    },
    axisPointer: {
      snap: true,
      show: true,
      type: "line",
    },
  };
  numAlarmsChart.value.setOption(option, true);
};

/* -------------以下是echarts图表数据请求 */
// 获取指定日期的老化合格率
const fetchCurAgePassRateStatistic = () => {
  monitorageApi
    .getCurAgePassRateStatistic({
      UUID: "52d1ed5c58364e6248935455c1a298f5",
      CurDate: dayjs().format("YYYY-MM-DD HH:mm:ss"),
    })
    .then((res) => {
      setAgingQualificationChart(res.Data);
    }).catch(err=>{
      console.log(err)
    })
};

//获取指定日期的检测合格率
const fetchCurCheckPassRateStatistic = () => {
  monitorageApi
    .getCurCheckPassRateStatistic({
      UUID: "52d1ed5c58364e6248935455c1a298f5",
      CurDate: dayjs().format("YYYY-MM-DD HH:mm:ss"),
    })
    .then((res) => {
      setAutomaticDetectionChartChart(res.Data);
    }).catch(err=>{
      console.log(err)
    })
};

//获取最近天数的老化和检测数量
const fetchTheLastProductAgeAndAutoCheckCntStatistic = () => {
  monitorageApi
    .getTheLastProductAgeAndAutoCheckCntStatistic({
      UUID: "52d1ed5c58364e6248935455c1a298f5",
      EndDate: dayjs().format("YYYY-MM-DD HH:mm:ss"),
      PreDayCnt: "7",
    })
    .then((res) => {
      let data = res.Data.map((el) => {
        return {
          Day: transitionTime(el.Day),
          AgeCnt: el.AgeCnt,
          AutoCheckCnt: el.AutoCheckCnt,
        };
      });
      setProductQuantityChart(data);
    }).catch(err=>{
      console.log(err)
    })
};

//获取最近天数的自动检测告警数量
const fetrchTheLasAutoCheckAlarmCntStatistic = () => {
  monitorageApi
    .getTheLasAutoCheckAlarmCntStatistic({
      UUID: "52d1ed5c58364e6248935455c1a298f5",
      EndDate: dayjs().format("YYYY-MM-DD HH:mm:ss"),
      PreDayCnt: "7",
    })
    .then((res) => {
      let data = res.Data.map((el) => {
        return {
          Day: transitionTime(el.Day),
          Cnt: el.Cnt,
        };
      });
      setNumAlarmsChart(data);
    }).catch(err=>{
      console.log(err)
    })
};

/* ------------以下是轮播表数据请求 */
//仪表和采集卡实时数据记录
let realtimeConfigData = ref([]);
// 仪表和采集卡实时数据记录配置
const realtimeConfigRef = ref()
const realtimeConfig = reactive({
  headerBGC: "#122D44",
  oddRowBGC: "#122840",
  header: ["时间", "仪表/通道", "仪表值", "通道值", "详情"],
  data: [],
  hoverPause: false,
  align: ["center", "center", "center", "center", "center"],
  columnWidth: [140, 220,110,260],
});
const fetchCurDayInstrAndCollectCardRealDataRecord = () => {
  monitorageApi
    .getCurDayInstrAndCollectCardRealDataRecord({
      UUID: "52d1ed5c58364e6248935455c1a298f5",
      CurDate: dayjs().format("YYYY-MM-DD HH:mm:ss"),
    })
    .then((res) => {
      let Record = res.Data;
      let data = Record.map((el, index) => {
        return [
          transitionTime(el.UpdateTime),
          el.Name,
          el.InstrValue,
          el.CCValue,
          `<span index='${index}' class='detail' dataName='realtimeConfigData' style='cursor: pointer;color: #00E5FF;'>详情</span>`,
        ];
      });
      realtimeConfigData.value = Record;
      realtimeConfigRef.value.updateRows(data,0)
    
    }).catch(err=>{
      console.log(err)
    })
};

// 老化车实时告警记录配置
let realtimeAlarmConfigData = ref([]);
const realtimeAlarmConfigRef = ref()
const realtimeAlarmConfig = reactive({
  headerBGC: "#122D44",
  oddRowBGC: "#122840",
  header: ["时间", "老化车", "仪表/通道", "告警描述", "详情"],
  data: [],
  hoverPause: false,
  columnWidth: [140,80,90,220],
  align: ["center", "center", "center", "center", "center", "center"],
});
//获取指定日期的老化车实时告警记录
const fetchCurDayLaoHuaCheRealAlarmRecord = () => {
  monitorageApi
    .getCurDayLaoHuaCheRealAlarmRecord({
      UUID: "52d1ed5c58364e6248935455c1a298f5",
      CurDate: dayjs().format("YYYY-MM-DD HH:mm:ss"),
    })
    .then((res) => {
      let Record = res.Data;

      let data = Record.map((el, index) => {
        return [
          transitionTime(el.UpdateTime),
          el.GWName,
          el.InstrName,
          el.AlarmDesp,
          `<span index='${index}' class='detail' dataName='realtimeAlarmConfigData' style='cursor: pointer;color: #00E5FF;'>详情</span>`,
        ];
      });
      realtimeAlarmConfigData.value = Record;
      realtimeAlarmConfigRef.value.updateRows(data,0)
    }).catch(err=>{
      console.log(err)
    })
};

//获取老化车实时信息
//正常老化车
let NormalArr = ref([]);
// 告警老化车
let AlarmArr = ref([]);
const fetchCurDayLaoHuaCheRealInfos = () => {
  monitorageApi
    .getCurDayLaoHuaCheRealInfos({
      UUID: "52d1ed5c58364e6248935455c1a298f5",
      CurDate: dayjs().format("YYYY-MM-DD HH:mm:ss"),
    })
    .then((res) => {
      let { NormalGWs, AlarmGWs } = res.Data;
      NormalArr.value = NormalGWs;
      AlarmArr.value = AlarmGWs;
    }).catch(err=>{
      console.log(err)
    })
};

/* ---------------以下是请求 */
let id;
id = setInterval(() => {
  // 定时请求获取指定日期的老化合格率
  fetchCurAgePassRateStatistic();
  //定时请求指定日期的检测合格率
  fetchCurCheckPassRateStatistic();
  //定时请求获取最近天数的老化和检测数量
  fetchTheLastProductAgeAndAutoCheckCntStatistic();
  //定时请求获取最近天数的自动检测告警数量
  fetrchTheLasAutoCheckAlarmCntStatistic();
  //定时请求获取仪表和采集卡实时数据记录
  fetchCurDayInstrAndCollectCardRealDataRecord();
  //定时请求获取指定日期的老化车实时告警记录
  fetchCurDayLaoHuaCheRealAlarmRecord();
  //定时请求老化车实时信息
  fetchCurDayLaoHuaCheRealInfos();
}, 5000);
onMounted(() => {
  props.fullscreen();

  // 初始化获取指定日期的老化合格率
  fetchCurAgePassRateStatistic();
  //初始化指定日期的检测合格率
  fetchCurCheckPassRateStatistic();
  //初始化获取最近天数的老化和检测数量
  fetchTheLastProductAgeAndAutoCheckCntStatistic();
  //初始化获取最近天数的自动检测告警数量
  fetrchTheLasAutoCheckAlarmCntStatistic();
  //初始化获取仪表和采集卡实时数据记录
  fetchCurDayInstrAndCollectCardRealDataRecord();
  //初始化获取指定日期的老化车实时告警记录
  fetchCurDayLaoHuaCheRealAlarmRecord();
  //获取老化车实时信息
  fetchCurDayLaoHuaCheRealInfos();
});
onBeforeUnmount(() => {
  if (id) clearInterval(id);
});
</script>

<style lang="scss" scoped>
@keyframes ts {
  0% {
    transform: translateX(0);
  }
  100% {
    transform: translateX(-50%);
  }
}
.transform {
  animation: ts 10s linear infinite;
}
.list-enter-active,
.list-leave-active {
  transition: all 0.5s ease;
  opacity: 0;
}

.list-enter-from,
.list-leave-to {
  transform: translateX(-150px);
}
.monitorage {
  padding: 6px;
  overflow: hidden;
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: center;

  & > ul {
    overflow: hidden;
    width: 100%;
    display: flex;
    justify-content: space-between;
    align-items: center;
  }
  .monitorage_top {
    height: 68%;
    margin-bottom: 6px;
    & > li {
      height: 100%;
      /*  flex: 1; */
    }
    .monitorage_top_left,
    .monitorage_top_right {
      display: flex;
      flex-direction: column;
      justify-content: space-between;
      align-items: center;
      & > div {
        width: 100%;
        flex: 1;
        // background-image: url("@/static/supervisoryControl/pic_bj05.png");
        border-image: url("@/static/supervisoryControl/pic_bj05.png") 12/8px/1;
        /*  background: linear-gradient(to bottom, #112e46, #131d34); */
        display: flex;
        flex-direction: column;
        justify-content: space-between;
        align-items: center;
        overflow: hidden;

        // background-size: 100% 100%;
      }
    }
    .monitorage_top_left {
      width: 15%;
      .monitorage_top_left_top_div {
        margin-bottom: 6px;
        background: url("@/static/supervisoryControl/pic_bj03.png"),
          linear-gradient(to bottom, #04101b, #01101b);
        background-size: cover;
        background-position: center;
      }
      .monitorage_top_left_bottom_div {
        background: url("@/static/supervisoryControl/pic_bj03.png"),
          linear-gradient(to bottom, #04101b, #01101b);
        background-size: cover;
        background-position: center;
      }
    }

    .monitorage_top_center {
      margin: 0 6px;
      width: 60%;
      overflow: hidden;
      border-image: url("@/static/supervisoryControl/pic_bj09.png") 10/8px/0;
      background: linear-gradient(to bottom, #112e46, #131d34);
      //background-image: url("@/static/supervisoryControl/pic_bj09.png");
      //background-size: 100% 100%;
      display: flex;
      flex-direction: column;
      justify-content: space-between;
      align-items: center;

      & > * {
        width: 100%;
      }
      .monitorage_error {
        flex: 1;
        overflow: hidden;
        display: flex;
        flex-direction: column;
        justify-content: space-between;
        align-items: center;

        & > div {
          width: 100%;
        }
        //告警的轮播图
        .swiper_top {
          height: 58%;
          overflow: hidden;
          margin-bottom: 6px;
          border-bottom: 1px solid #0f455d;
          .mySwiper1 {
            height: 100%;
            width: 100%;
            ul {
              width: 100%;
              height: 100%;
              display: flex;
              justify-content: flex-start;
              align-items: center;
              padding: 1% 0.6%;
              & > li {
                height: 100%;
                width: 33.3%;
              }
            }
          }
        }
        // 告警时正常展示的轮播图
        .swiper_bottom {
          border-top: 1px solid #0f455d;
          height: 42%;
          overflow: hidden;
          .mySwiper2 {
            height: 100%;
            width: 100%;
            ul {
              width: 100%;
              height: 100%;
              display: flex;
              justify-content: flex-start;
              align-items: center;
              padding: 1% 0.6%;
              & > li {
                height: 100%;
                width: 25%;
              }
            }
          }
        }
      }
      .monitorage_show {
        height: 100%;
        padding: 4% 1%;
        .mySwiper3 {
          height: 100%;
          width: 100%;
          ul {
            width: 100%;
            height: 100%;
            display: flex;
            flex-wrap: wrap;
            justify-content: flex-start;
            align-content: space-between;
            & > li {
              width: 25%;
              height: 45%;
            }
          }
        }
      }
    }
    .monitorage_top_right {
      width: 25%;
    
      .monitorage_top_right_top_div {
        margin-bottom: 6px;
      }
    }
  }
  .monitorage_bottom {
    display: flex;
    justify-content: space-between;
    align-items: center;

    height: 32%;
    & > li {
      height: 100%;
      //   background-image: url("@/static/supervisoryControl/pic_bj04.png");
      //   background-size: 100% 100%;
      border-image: url("@/static/supervisoryControl/pic_bj05.png") 10/8px/0;
      background: linear-gradient(to bottom, #112e46, #131d34);
      padding: 0 10px 10px;
    }
    .monitorage_bottom_left {
      margin-right: 6px;
      width: 58%;
    }
    .monitorage_bottom_right {
      width: 42%;
    }
  }
  // 上半部分内容显示区域
  .content_bg {
    position: relative;
    container-type: size !important;
    @keyframes identifier {
      0% {
        box-shadow: 0 0 0px #00ffed;
      }
      50% {
        box-shadow: 0 0 calc((25cqh) + (25cqw)) #00ffed;
      }
      100% {
        box-shadow: 0 0 0px #00ffed;
      }
    }

    .bg {
      position: absolute;
      width: calc((25cqh) + (25cqw));
      height: calc((25cqh) + (25cqw));
      left: 50%;
      top: 50%;
      transform: translateX(-50%) translateY(-50%);
      z-index: 0;
      //background-color: red;
      border-radius: 100%;
      box-shadow: 0 0 100px #00ffed;
      animation: identifier 5s linear infinite;
    }
  }
  .content {
    flex: 1;
    overflow: hidden;
    width: 100%;

    #agingQualification,
    #automaticDetection {
      margin: 0 auto;
      height: 100%;
      width: 100%;
      overflow: hidden;
      & > div {
        margin: 0 auto;
        height: 100%;
        width: 100%;
        overflow: hidden;
      }
    }
  }
}
</style>